import React from "react";
import { forwardRef, useCallback, useImperativeHandle, useState } from "react";

export interface ServiceImp {
  log: () => void;
}

const Service = forwardRef<ServiceImp>((props, ref) => {
  const [value, setValue] = useState<string>();
  const log = useCallback(() => {
    console.log("ref", value);
  }, [ref, value]);

  useImperativeHandle(ref, () => ({
    log,
  }));
  return (
    <div>
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
});

export default Service;
